<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>sentox-DataGrid</title>
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/easyui.css" />
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/font-awesome.min.css">

		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	</head>

	<body>
		<div id="tb" class="grid-td">
			<span class="grid-tjm"></span>
			<input name="pagename" id="pagename" placeholder="查询标题" />
			<a href="#" class="grid-bt" id="bt_query"><i class="fa fa-search fa-yxa3"></i>查询</a>
			<a href="#" class="grid-bt" id="bt_add"><i class="fa fa-plus fa-yxa3"></i>增加</a>
			<a href="#" class="grid-bt" id="bt_del"><i class="fa fa-trash-o fa-yxa3"></i>删除</a>
		</div>
		<table id="datagrid"></table>
	</body>

</html>
<script type="text/javascript">
	$('#datagrid').datagrid({
		url: '../json/datagrid_data1.json',
		method: 'get',
		toolbar: '#td',
		rownumbers: true,
		fitColumns: true,
		border: false,
		singleSelect: true,
		scrollbar: 'horizontal',
		scrollbarSize: 15,
		pagination: true,
		pageSize: 20,
		height: 500,
		idField: 'itemid',
		checkbox: true,
		columns: [
			[{
				field: 'ck',
				checkbox: true
			}, {
				field: 'itemid',
				title: '编号',
				align: 'center',
				width: 10
			}, {
				field: 'productid',
				title: '商品',
				align: 'center',
				width: 10
			}, {
				field: 'listprice',
				title: '价格',
				align: 'center',
				width: 10
			}, {
				field: 'unitcost',
				title: '数量',
				align: 'center',
				width: 10
			}, {
				field: 'attr1',
				title: '属性',
				align: 'center',
				width: 10
			}, {
				field: 'status',
				title: '状态',
				align: 'center',
				width: 10
			}, {
				field: 'action',
				title: '操作',
				align: 'center',
				width: 10,
				formatter: function(value, row, index) {
					return "<a class='grid-bt2' href=javascript:bt_edit('"+row.itemid+"');>编辑</a>";
				}
			}]
		]
	});
	var p = $('#datagrid').datagrid('getPager');
	$(p).pagination({
		pageSize: 20, //每页显示的记录条数，默认为10
		pageList: [10, 20, 30, 40, 50, 100], //可以设置每页记录条数的列表
		beforePageText: '第', //页数文本框前显示的汉字
		afterPageText: '页    共 {pages} 页',
		displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
	});

	//新增
	$("#bt_add").click(function() {
		parent.$('#dd').dialog({
			title: '新增',
			width: 500,
			height: 200,
			closed: false,
			cache: false,
			href: 'plugins/add.html',
			modal: true,
			buttons: [{
				text: '保存',
				iconCls: 'fa fa-check fa-yxa4',
				handler: function() {
					$('#saveform').form('submit', {
						url: '#',
						success: function(result) {
							try {
								var r = $.parseJSON(result);
								if(r.success) {
									parent.$('#dd').dialog('close')
									$('#datagrid').datagrid('reload');
								}
								$.messager.show({
									title: '提示',
									msg: r.message
								});
							} catch(e) {
								$.messager.alert('提示', result);
							}
						}
					});
				}
			}],
			onClose: function() {}
		});
	});

	//编辑
	function bt_edit(id) {
		parent.$('#dd').dialog({
			title: '编辑',
			width: 500,
			height: 200,
			closed: false,
			cache: false,
			href: 'plugins/add.html',
			modal: true,
			buttons: [{
				text: '保存',
				iconCls: 'fa fa-check fa-yxa4',
				handler: function() {
					$('#saveform').form('submit', {
						url: '#',
						success: function(result) {
							try {
								var r = $.parseJSON(result);
								if(r.success) {
									parent.$('#dd').dialog('close')
									$('#datagrid').datagrid('reload');
								}
								$.messager.show({
									title: '提示',
									msg: r.message
								});
							} catch(e) {
								$.messager.alert('提示', result);
							}
						}
					});
				}
			}],
			onClose: function() {}
		});
	}
</script>